<template>
  <div class='van-clearfix'>
    <van-search v-model="value"
                placeholder="请输入搜索关键词"
                show-action
                @search="onSearch"
                @cancel="onCancel" />
    <van-icon class-prefix="iconfont"
              name="clothes">&#xe607;</van-icon>
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              @load="onLoad">
      <van-cell v-for="item in list"
                :key="item.itemId">
        <template slot="title">
          <span>{{item.resultDesc}}</span>
        </template>
        <template slot="default">
          <van-button type="primary"
                      @click="exec"
                      size="mini">考核</van-button>
          <van-button type="warning"
                      @click="history"
                      size="mini">历史</van-button>
        </template>
      </van-cell>
    </van-list>
    <van-dialog v-model="show"
                @confirm='submit'
                @cancel='cancel'
                title="目标考核"
                show-cancel-button>
      <van-field v-model="execValue"
                 clearable
                 label-width='60px'
                 label="目标值"
                 size="large"
                 placeholder="请输入目标值" />
      <van-field v-model="execValue"
                 clearable
                 label-width='60px'
                 label="目标值"
                 size="large"
                 placeholder="请输入目标值" />
    </van-dialog>
  </div>
</template>
<script>
import { Icon, Search, List, Cell, Button, Dialog, Toast, Field, Notify } from 'vant'
import { GetPostToDo } from '@/api/detail'
export default {
  name: 'detail',
  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field,
    [Icon.name]: Icon
  },
  data () {
    return {
      value: '',
      list: [],
      finished: false,
      error: false,
      loading: false,
      searchForm: {
        // templateId: 0,
        // category1: null,
        // category2: null,
        // itemName: '',
        // username: null,
        // yearValue: '2019',
        // dateValue: null
      },
      page: {
        pageNum: 1,
        pageSize: 10
      },
      show: false,
      execValue: ''
    }
  },
  methods: {
    onSearch () {
      Toast('搜索')
    },
    onCancel () {
      Toast('取消')
    },
    onLoad () {
      GetPostToDo(this.page, this.searchForm).then(res => {
        // eslint-disable-next-line no-console
        console.log(res)
        this.list.push(...res.rows)
        this.loading = false
        if (res.total < this.page.pageSize * this.page.pageNum) {
          this.finished = true
        }
        this.page.pageNum++
      }).catch(() => {
        this.error = true;
      })
    },
    exec () {
      this.show = true
    },
    history () {
      Toast('历史')
    },
    submit () {
      Notify({ type: 'success', message: '提交成功' });
    },
    cancel () {
      Notify({ type: 'warning', message: '已取消' });
    }
  }
}
</script>